<template>
  <div>
    <div style="display: flex;flex-wrap: wrap">
      <!--     <span style="margin:0 15px 10px 0">仓库： <el-select size="small" style="width: 200px;margin-right: 10px;" clearable-->
      <!--                                                       v-model="params.areaId"-->
      <!--                                                       filterable-->
      <!--                                                       placeholder="请选择仓库">-->
      <!--        <el-option v-for="item in provinceOptions" :key="item.area" :label="item.areaName"-->
      <!--                   :value="item.area">-->
      <!--        </el-option>-->
      <!--      </el-select></span>-->
      <span style="margin:0 15px 10px 0"> 扫描机设备号：
        <el-select size="small" style="width: 200px"
                   clearable
                   v-model="params.scannerDeviceNo"
                   placeholder="请输入扫描机设备号">
          <el-option v-for='(item,index) in scannerData' :key="index" :value="item.deviceNumber"
                     :label="item.deviceName"></el-option>
        </el-select></span>
      <span style="margin:0 15px 10px 0"> epc编码：
        <el-input size="small" style="width: 200px"
                  v-model="params.epcCode"
                  clearable
                  placeholder="请输入epc编码"></el-input></span>
      <span style="margin:0 15px 10px 0"> sku编码：
        <el-input size="small" style="width: 200px"
                  v-model="params.skuCode"
                  clearable
                  placeholder="请输入sku编码"></el-input></span>
      <span style="margin:0 15px 10px 0"> 材料名称：
        <el-input size="small" style="width: 200px"
                  v-model="params.goodName"
                  clearable
                  placeholder="请输入材料名称"></el-input></span>
      <span style="margin:0 15px 10px 0"> 规格：
        <el-input size="small" style="width: 200px"
                  v-model="params.spec"
                  clearable
                  placeholder="请输入规格"></el-input></span>
      <span style="margin:0 15px 10px 0"> 雷达设备号：
        <el-input size="small" style="width: 200px"
                  v-model="params.radarDeviceNo"
                  clearable
                  placeholder="请输入雷达设备号"></el-input></span>
      <span style="margin:0 15px 10px 0"> 类型：
  <el-select v-model="params.changeType" size="small" style="width: 200px" clearable>
    <el-option label="扫描机" value="1"></el-option>
    <el-option label="雷达" value="2"></el-option>
  </el-select>
        <span style="margin:0 15px 10px 0"> 材料类型：
  <el-select v-model="params.goodType" size="small" style="width: 200px" clearable>
    <el-option label="货架" value="1"></el-option>
    <el-option label="材料" value="2"></el-option>
  </el-select></span>
      </span> <span style="margin:0 15px 10px 0"> 操作类型：
  <el-select v-model="params.alterType" size="small" style="width: 200px" clearable>
    <el-option label="入库" value="1"></el-option>
    <el-option label="出库" value="2"></el-option>
    <el-option label="盘点" value="3"></el-option>
    <el-option label="关联" value="4"></el-option>
    <el-option label="入仓" value="5"></el-option>
    <el-option label="订单出库" value="6"></el-option>
    <el-option label="删除标签出库" value="7"></el-option>
    <el-option label="删除标签入仓" value="8"></el-option>
  </el-select>
      </span>
      <span style="margin:0 15px 10px 0">
        <el-button size="small" type="primary" @click="_search">查 询</el-button>
        <el-button size="small" type="primary" @click="_reset">重 置</el-button>
        <el-button size="small" type="primary" @click="_link" v-if="authority.includes(1221)">连接雷达</el-button>
      </span>
    </div>
    <el-table :data="equipmentData" border
              height="calc(100vh - 300px)"
              :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
              :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
      <el-table-column type="index" label="序号" width="60px"></el-table-column>
      <el-table-column prop="skuCode" label='SKU编码' width="120px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="goodName" label='材料名称' show-overflow-tooltip></el-table-column>
      <el-table-column prop="spec" label='规格' show-overflow-tooltip></el-table-column>
      <el-table-column prop="areaName" label='仓库'></el-table-column>
      <el-table-column prop="originalQuantity" label='标签下原库存' width="120px"></el-table-column>
      <el-table-column prop="currentQuantity" label='标签下现库存' width="120px"></el-table-column>
      <el-table-column prop="oldAllQuantity" label='单品原总库存' width="120px">
        <template v-slot:default="scope">
          <span style="color: #1E90FF;font-weight: bold">{{ scope.row.oldAllQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="newAllQuantity" label='单品现总库存' width="120px">
        <template v-slot:default="scope">
          <span style="color: #1E90FF;font-weight: bold">{{ scope.row.newAllQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="changeQuantity" label='变动库存'></el-table-column>
      <el-table-column prop="changeTime" label='变动时间' show-overflow-tooltip></el-table-column>
      <el-table-column prop="deviceName" label='设备号名称' width="150px"></el-table-column>
      <!--      <el-table-column prop="totalQuantity" label='sku库存数量' width="150px"></el-table-column>-->
      <el-table-column prop="epcCode" label='epc编码' width="150px"></el-table-column>
      <el-table-column label='类型'>
        <template v-slot:default="scope">
          <el-tag effect="dark" v-if="scope.row.changeType==1">扫描机</el-tag>
          <el-tag effect="dark" v-if="scope.row.changeType==2">雷达</el-tag>
        </template>
      </el-table-column>
      <el-table-column label='材料类型'>
        <template v-slot:default="scope">
          <el-tag effect="dark" type="success" v-if="scope.row.goodType==1">货架</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.goodType==2">材料</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderName" label="订单名称" width="150px" show-overflow-tooltip></el-table-column>
      <el-table-column label='操作类型'>
        <template v-slot:default="scope">
          <el-tag effect="dark" type="warning" v-if="scope.row.alterType==1">入库</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.alterType==2">出库</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.alterType==3">盘点</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.alterType==4">关联</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.alterType==5">入仓</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.alterType==6">订单出库</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.alterType==7">删除标签出库</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.alterType==8">删除标签入仓</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column label='连接雷达'>-->
      <!--        <template v-slot:default="scope">-->
      <!--          <el-link type="primary" @click="_link(scope.row)">链接</el-link>-->

      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <el-pagination
        style="padding: 20px 0"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
    >
    </el-pagination>
  </div>
</template>

<script>
import quinn from "../../utils/quinn";

export default {
  name: "equipmentRecord",
  data() {
    return {
      equipmentData: [],
      authority: [],
      scannerData: [],
      params: {
        pageSize: 20,
        pageNumber: 1,
        scannerDeviceNo: ""
      },
      currentPage: 1,
      totalCount: 0
    }
  },
  created() {
    const {authorityList = []} = quinn.getStorage('userData')
    this.authority = authorityList
    this.getList()
    this.getscannerData()
  },
  methods: {
    getscannerData() {
      this.$api.apiGetDeviceList().then(res => {
        this.scannerData = res
      })
    },
    getList() {
      this.$api.apiGetTagInventoryRecordList(this.params).then(res => {
        this.equipmentData = res.data
        this.totalCount = res.total
      })
    },
    _search() {
      this.params.pageNumber = 1
      this.getList()
    },
    _reset() {
      this.params = this.$options.data.call(this).params
      this.getList()
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getList()
    },
    async _link() {
      const aData = await this.$api.radarConnect()
      this.$message.success('请求成功')
    }
  }
}
</script>

<style scoped>

</style>